<template>
  <div class="mobile-main-dashboard">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <h1 class="header-title">
          <i class="bi bi-hospital"></i>
          柳州市妇幼保健院信息系统
        </h1>
        <div class="header-actions">
          <button class="btn btn-sm btn-outline-light" @click="logout">
            <i class="bi bi-box-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="mobile-content">
      <!-- 欢迎信息 -->
      <div class="welcome-section">
        <div class="welcome-card">
          <div class="welcome-icon">
          </div>
          <div class="welcome-content">
            <h2 class="welcome-title">欢迎使用</h2>
            <p class="welcome-subtitle">柳州市妇幼保健院信息管理系统</p>
            <div class="user-info" v-if="userInfo">
              <span class="user-name">{{ userInfo.fullName }}</span>
              <span class="user-name">{{ userInfo.username }}</span>
              <span class="user-name">{{ userInfo.userPhone || '-' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能模块网格 -->
      <div class="modules-section">
        <h3 class="section-title">
          <i class="bi bi-grid-3x3-gap"></i>
          功能模块
        </h3>
        
        <div class="modules-grid">
          <!-- 退款管理模块 -->
          <div class="module-card" @click="navigateToRefundManagement">
            <div class="module-icon refund">
              <i class="bi bi-cash-coin"></i>
            </div>
            <div class="module-content">
              <h4 class="module-title">退款管理</h4>
              <p class="module-description">患者退费任务管理与联系记录</p>
            </div>
            <div class="module-arrow">
              <i class="bi bi-chevron-right"></i>
            </div>
          </div>

          <!-- 工作量查询模块 -->
        <div class="module-card" @click="navigateToWorkloadQuery">
        <!-- <div class="module-card disabled" >-->
          <div class="module-icon workload">
            <i class="bi bi-bar-chart"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">工作量查询</h4>
            <p class="module-description">退费任务工作量统计与查询</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

        <!-- 患者联系记录查询模块 -->
        <div class="module-card" @click="navigateToPatientContactQuery">
          <div class="module-icon contact">
            <i class="bi bi-telephone"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">联系记录查询</h4>
            <p class="module-description">通过手机号查询患者联系记录</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

        <!-- 患者卡信息查询模块 - 仅限特定用户 -->
        <div v-if="canAccessPatientCardQuery" class="module-card" @click="navigateToPatientCardQuery">
          <div class="module-icon card">
            <i class="bi bi-credit-card"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">患者卡信息查询</h4>
            <p class="module-description">查询患者卡信息</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

        <!-- 软件正版化查询模块 -->
        <div class="module-card" @click="navigateToSoftwareLicenseQuery">
          <div class="module-icon software">
            <i class="bi bi-pc-display"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">软件正版化查询</h4>
            <p class="module-description">通过MAC地址查询电脑软件信息</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

        <!-- 住院查询模块 -->
        <div class="module-card" @click="navigateToInpatientQuery">
          <div class="module-icon inpatient">
            <i class="bi bi-hospital"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">住院查询</h4>
            <p class="module-description">查询病区在院患者信息</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

        <!-- 预留其他模块 -->
        <!-- <div class="module-card disabled">
          <div class="module-icon system">
            <i class="bi bi-gear"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">系统设置</h4>
            <p class="module-description">系统配置与参数管理</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div> -->

        <div class="module-card disabled">
          <div class="module-icon report">
            <i class="bi bi-bar-chart"></i>
          </div>
          <div class="module-content">
            <h4 class="module-title">退款工作统计报表</h4>
            <p class="module-description">数据统计与报表分析</p>
          </div>
          <div class="module-arrow">
            <i class="bi bi-chevron-right"></i>
          </div>
        </div>

          <!-- <div class="module-card disabled">
            <div class="module-icon help">
              <i class="bi bi-question-circle"></i>
            </div>
            <div class="module-content">
              <h4 class="module-title">帮助中心</h4>
              <p class="module-description">使用说明与常见问题</p>
            </div>
            <div class="module-arrow">
              <i class="bi bi-chevron-right"></i>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 系统信息 -->
      <!-- <div class="system-info-section">
        <div class="info-card">
          <div class="info-header">
            <i class="bi bi-info-circle"></i>
            <span>系统信息</span>
          </div>
          <div class="info-content">
            <div class="info-item">
              <span class="info-label">版本号:</span>
              <span class="info-value">v1.0.0</span>
            </div>
            <div class="info-item">
              <span class="info-label">最后更新:</span>
              <span class="info-value">{{ formatDateTime(new Date()) }}</span>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'

export default {
  name: 'MainDashboard',
  setup() {
    const authStore = useAuthStore()
    const router = useRouter()
    const userInfo = ref(null)

    // 允许访问患者卡信息查询的用户名列表（已添加新用户并去重）
const allowedUsernames = ["14019", "11638", "11110", "14052", "13638", "11409", "13646", "11754","13411", "14026", "14015", "13634", "14009", "11781", "13717", "14051","14166", "14164", "14050", "14025", "14022", "13632", "14039", "13637","11033", "13635", "14045", "11381", "14044", "13647", "13640", "11808","13641", "13644", "14030", "13643", "11377", "14049", "13639", "13649","14013", "11806", "11412", "14012", "13633", "11319", "13650", "14054","20182", "20184", "14011", "14014", "13645", "14017", "14165", "11563","14029", "14010", "13642", "13631", "13636", "14031", "11275", "20108","11136", "20214", "11692", "14149", "12700", "11611", "12082", "20232","20020", "13191", "11302", "13596", "13791", "11596", "20101", "13251","13432", "22432", "13223", "14147", "12084", "12123", "17002", "11411","11761", "13678", "13245", "22251", "12597", "12019", "13260", "11981","12495", "22232", "22606", "20008", "20179", "12442", "15040", "20180","20181", "22395", "20065", "11738", "20086", "13869", "11036", "13169","20160", "12121", "12314", "11431", "13593", "18011", "13105", "13046","20259", "11423", "13669", "14146", "20082", "11772", "13450", "11103","13570", "14364", "11205", "16020", "11777", "13046"]

    // 检查当前用户是否有权限访问患者卡信息查询
    const canAccessPatientCardQuery = computed(() => {
      return userInfo.value && allowedUsernames.includes(userInfo.value.username)
    })

    // 获取用户信息
    onMounted(() => {
      userInfo.value = authStore.user
    })

    // 导航到退款管理
    const navigateToRefundManagement = () => {
      router.push('/refund-management')
    }

    // 导航到工作量查询
    const navigateToWorkloadQuery = () => {
      router.push('/workload-query')
    }

    // 导航到患者联系记录查询
    const navigateToPatientContactQuery = () => {
      router.push('/patient-contact-query')
    }

    // 导航到患者卡信息查询
    const navigateToPatientCardQuery = () => {
      router.push('/patient-card-query')
    }

    // 导航到软件正版化查询
    const navigateToSoftwareLicenseQuery = () => {
      router.push('/software-license-query')
    }

    // 导航到住院查询
    const navigateToInpatientQuery = () => {
      router.push('/inpatient-query')
    }

    // 退出登录
    const logout = () => {
      authStore.logout()
      router.push('/login')
    }

    // 格式化日期时间
    const formatDateTime = (date) => {
      if (!date) return '-'
      return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    return {
      userInfo,
      canAccessPatientCardQuery,
      navigateToRefundManagement,
      navigateToWorkloadQuery,
      navigateToPatientContactQuery,
      navigateToPatientCardQuery,
      navigateToSoftwareLicenseQuery,
      navigateToInpatientQuery,
      logout,
      formatDateTime
    }
  }
}
</script>

<style scoped>
/* 基础布局 */
.mobile-main-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 头部样式 - 与RefundTaskManagementMobile保持一致 */
.mobile-header {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1565c0;
  padding: 0.32rem;
  padding-top: calc(0.32rem + env(safe-area-inset-top));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #90caf9;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  color: #0d47a1;
  line-height: 1.2;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn {
  border-radius: 6px;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #1976d2;
  color: #1976d2;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.header-actions .btn:hover {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}

/* 主要内容区域 */
.mobile-content {
  padding: 1rem;
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 2rem;
}

.welcome-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.welcome-icon {
  font-size: 3rem;
  color: #1976d2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-image: url('/fylog1d.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.welcome-content {
  flex: 1;
}

.welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1565c0;
  margin: 0 0 0.5rem 0;
}

.welcome-subtitle {
  font-size: 1rem;
  color: #666;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-name {
  font-weight: 600;
  color: #1976d2;
  background: #e3f2fd;
  padding: 0.25rem 0.95rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

/* 功能模块区域 */
.modules-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modules-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.module-card {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  min-height: 70px;
  width: 100%;
  box-sizing: border-box;
}

.module-card:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #1976d2;
}

.module-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.module-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.module-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.module-icon.refund {
  background: linear-gradient(135deg, #4caf50, #45a049);
}

.module-icon.system {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

.module-icon.report {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}

.module-icon.help {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.module-icon.workload {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.module-icon.contact {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.module-icon.card {
  background: linear-gradient(135deg, #ffc107, #ff9800);
}

.module-icon.software {
  background: linear-gradient(135deg, #00bcd4, #0097a7);
}

.module-icon.inpatient {
  background: linear-gradient(135deg, #e91e63, #c2185b);
}

.module-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.module-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.25rem 0;
}

.module-description {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.module-arrow {
  font-size: 1.2rem;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.module-card:hover:not(.disabled) .module-arrow {
  color: #1976d2;
}

/* 系统信息区域 */
.system-info-section {
  margin-bottom: 1rem;
}

.info-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.info-header {
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #495057;
}

.info-content {
  padding: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f4;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 500;
  color: #666;
}

.info-value {
  font-weight: 600;
  color: #333;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .mobile-main-dashboard {
    background: #121212;
    color: #ffffff;
  }

  .mobile-header {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    color: #e3f2fd;
    border-bottom-color: #444;
  }

  .header-title {
    color: #90caf9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .header-actions .btn {
    border-color: #64b5f6;
    color: #64b5f6;
    background: rgba(0, 0, 0, 0.3);
  }

  .header-actions .btn:hover {
    background: #64b5f6;
    color: #000;
    border-color: #64b5f6;
  }

  .welcome-card,
  .module-card,
  .info-card {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
  }

  .welcome-title,
  .module-title {
    color: #ffffff !important;
  }

  .welcome-subtitle,
  .module-description {
    color: #cccccc !important;
  }

  .section-title {
    color: #ffffff !important;
  }

  .info-header {
    background: #1e1e1e !important;
    border-bottom-color: #444 !important;
    color: #ffffff !important;
  }

  .info-label {
    color: #cccccc !important;
  }

  .info-value {
    color: #ffffff !important;
  }

  .info-item {
    border-bottom-color: #444 !important;
  }
}

#app.dark-mode .mobile-main-dashboard {
  background: #121212;
  color: #ffffff;
}

#app.dark-mode .mobile-header {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  color: #e3f2fd;
  border-bottom-color: #444;
}

#app.dark-mode .header-title {
  color: #90caf9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#app.dark-mode .header-actions .btn {
  border-color: #64b5f6;
  color: #64b5f6;
  background: rgba(0, 0, 0, 0.3);
}

#app.dark-mode .header-actions .btn:hover {
  background: #64b5f6;
  color: #000;
  border-color: #64b5f6;
}

#app.dark-mode .welcome-card,
#app.dark-mode .module-card,
#app.dark-mode .info-card {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

#app.dark-mode .welcome-title,
#app.dark-mode .module-title {
  color: #ffffff !important;
}

#app.dark-mode .welcome-subtitle,
#app.dark-mode .module-description {
  color: #cccccc !important;
}

#app.dark-mode .section-title {
  color: #ffffff !important;
}

#app.dark-mode .info-header {
  background: #1e1e1e !important;
  border-bottom-color: #444 !important;
  color: #ffffff !important;
}

#app.dark-mode .info-label {
  color: #cccccc !important;
}

#app.dark-mode .info-value {
  color: #ffffff !important;
}

#app.dark-mode .info-item {
  border-bottom-color: #444 !important;
}

/* 响应式调整 */
@media (max-width: 576px) {
  .mobile-content {
    padding: 0.75rem;
  }

  .welcome-card {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
  }

  .welcome-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .welcome-title {
    font-size: 1.3rem;
  }

  .module-card {
    padding: 0.75rem;
  }

  .module-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .module-icon i {
    width: 100%;
    height: 100%;
  }

  .module-title {
    font-size: 1rem;
  }

  .module-description {
    font-size: 0.85rem;
  }
}
</style>